<template>
  <!--
   全局路由守卫：
      前置守卫：beforeEach(每一个路由跳转前都要经过它)
      解析守卫：beforeResolve(路由跳转最后一道关卡)
      后置守卫：afterEach（已到达相应想去路由）
   路由所对应组件的守卫
      进入前：beforeRouteEnter(执行时机，在组件的beforeCreate前执行)
      更新前：beforeRouteUpdate(路由所对应组件不变，路由更新)
      离开前:beforeRouteLeave(离开该路由前执行)
         A===>B:
   路由配制守卫
      读取前:beforeEnter
 -->

  <div>
    about
    <button @click="$router.push('/about?id=' + Date.now())">跳转路由</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      str: 'about'
    }
  },
  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
    next(vm => {
      console.log(vm.str)
    })
  },
  beforeRouteUpdate (to, from, next) {
    console.log('beforeRouteUpdate', to.query.id)
    next()
  },
  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
    next()
  },
  created () {
    console.log('about:created')
  }
}
</script>
<style></style>
